<template>
  <div>
    <el-card
      class="box-card"
      style="
        min-height: 75vh; /* 最小高度为视口高度 */
        max-height: auto; /* 允许内容超出视口时自动扩展 */
        overflow: auto; /* 当内容超出时允许滚动 */
      "
    >
      <div slot="header" class="clearfix">
        <span style="font-weight: bold; font-size: large">{{ title }}</span>
      </div>
      <el-form
        :ref="formRef"
        :model="form"
        :rules="rules"
        :inline="true"
        label-position="right"
      >
        <el-row
          v-for="(label, labelindex) in formList"
          :key="labelindex"
          v-if="formList.length"
        >
          <el-col :span="item.span" v-for="item in label.labelList">
            <el-form-item
              :label="item.label"
              :prop="item.prop"
              :label-width="item.labelWidth"
              v-if="!item.if"
            >
              <!--数字输入限制指令不启用状态-->
              <component
                :is="item.type"
                v-model="form[item.prop]"
                v-bind="item.components"
                style="width: 15vw"
                v-on="item.components.events"
                v-if="item.instruction !== 'number'"
              >
                <template v-if="item.type === 'el-select'">
                  <el-option
                    v-for="option in item.components.option.list || []"
                    :key="option[item.components.option.key]"
                    :label="option[item.components.option.label]"
                    :value="option[item.components.option.value]"
                  />
                </template>
              </component>

              <!--数字输入限制指令启用状态-->
              <component
                :is="item.type"
                v-model="form[item.prop]"
                v-bind="item.components"
                style="width: 15vw"
                v-on="item.components.events"
                v-number-input
                v-else
              >
                <template v-if="item.type === 'el-select'">
                  <el-option
                    v-for="option in item.components.option.list || []"
                    :key="option[item.components.option.key]"
                    :label="option[item.components.option.label]"
                    :value="option[item.components.option.value]"
                  />
                </template>
              </component>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <slot name="secondHalf"></slot>
    </el-card>
    <div
      style="
        position: fixed;
        bottom: 0;
        left: 0;
        height: 50px;
        width: 100%;
        background-color: rgb(255, 255, 255);
        display: flex;
        align-items: center;
      "
    >
      <div style="margin-left: auto; margin-right: 10px">
        <el-button
          v-for="(item, index) in buttonList"
          style="height: 40px"
          :key="index"
          :type="item.type"
          @click="item.methods"
          >{{ item.text }}</el-button
        >
        <el-button
          style="height: 40px"
          type="primary"
          @click="submitForm()"
          v-if="!submitButton"
          >确定</el-button
        >
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: this.title,
      formList: this.formList,
      // [
      //   {
      //     label: "员工姓名",
      //     prop: "name",
      //   },
      // ],
      rules: this.rules,
      //   {
      //     name: [
      //       { required: true, message: "请输入名称", trigger: "blur" },
      //       { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
      //     ],
      //   },
      buttonList: this.buttonList,
      //    [
      //     {
      //       text: "确定",
      //       type: "primary",
      //       methods: "",
      //     },
      //   ],
      formRef: this.formRef,
      form: this.form,
    }; //这里存放数据
  },
  props: {
    //标题
    title: {
      type: String,
      default: true,
    },
    //表单ref，参数校验用
    formRef: {
      type: String,
      default: true,
    },
    //表单内容
    formList: {
      type: Array,
      default: true,
    },
    //表单字段
    form: {
      type: Object,
      default: true,
    },
    //表单验证规则
    rules: {
      type: Object,
      default: true,
    },
    //确定按钮显示与否
    submitButton: {
      type: String,
      default: false,
    },
    //按钮列表
    buttonList: {
      type: Array,
      default: true,
    },
  },
  components: {}, //import引入的组件需要注入到对象中才能使用
  computed: {}, //监听属性 类似于data概念
  watch: {}, //监控data中的数据变化
  methods: {
    submitForm() {
      console.log(this.$refs[this.formRef]);
      this.$refs[this.formRef].validate((valid) => {
        if (valid) {
          console.log("验证通过");
          this.$emit("verifiedPassed");
        } else {
          console.log("验证不通过");
          this.$emit("verifiedNoPassed");
        }
      });
    },
    ceshi() {
      console.log(this.formList);
    },
  }, //方法集合
  created() {
    this.ceshi();
  }, //生命周期 - 创建完成(可以访问当前this实例)
  mounted() {}, //生命周期 - 挂载完成（可以访问DOM元素）
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped>
::v-deep .el-input__inner {
  height: 40px;
}
</style>
